<template>
<el-popover
  placement="bottom-start"
  :width="panelWidth"
  :disabled="disabled"
  v-model="visiblePanel"
  @hide="handelHide"
  :trigger="popoverTrigger">
  <div >
    <template v-if="type==='customer'">
       <CustomerPanel :params="params" v-if="visiblePanel" ref="panelRef" v-model="dataObj" :visible.sync="visiblePanel" @confirm="handelSelect"/>
    </template>
    <template v-else-if="type==='customerSigner'">
      <CustomerSignerPanel  :showMoreBtn="showMoreBtn" :params="params" v-if="visiblePanel" ref="panelRef" v-model="dataObj" :visible.sync="visiblePanel" @confirm="handelSelect"/>
    </template>
    <template v-else-if="type==='salesOrder'">
      <SalesOrderPanel :params="params" v-if="visiblePanel" ref="panelRef" v-model="dataObj" :visible.sync="visiblePanel" @confirm="handelSelect"/>
    </template>
    <template v-else-if="type==='employee'">
      <EmployeePanel :params="params" v-if="visiblePanel" ref="panelRef" v-model="dataObj" :visible.sync="visiblePanel" @confirm="handelSelect"/>
    </template>
    <template v-else-if="type==='contract'">
      <ContractPanel :params="params" v-if="visiblePanel" ref="panelRef" v-model="dataObj" :visible.sync="visiblePanel" @confirm="handelSelect"/>
    </template>
    <template v-else-if="type==='purchaseOrder'">
      <PurchaseOrderPanel :params="params" v-if="visiblePanel" ref="panelRef" v-model="dataObj" :visible.sync="visiblePanel" @confirm="handelSelect"/>
    </template>
  </div>
    <el-input
    slot="reference"
    v-model="dataObj[lableKey]"
    readonly
    :disabled="disabled"
    :class="isError"
    :style="{'width':width}"
    :value="dataObj[valueKey]"
    @mouseover.native="handleMouseover"
    @mouseleave.native="handleMouseleave"
    @click.native="inputClick"
    @blur="change"
    :placeholder="placeholder">
    <i slot="suffix" v-if="canClear"  @click.stop="inputClear" class="el-input__icon el-icon-circle-close el-icon__clear"></i>
    </el-input>
</el-popover>
</template>

<script>

export default {
  model: {
    prop: 'code',
    event: 'st'
  },
  props: {
    code: String,
    name: String,
    showMoreBtn: {type: Boolean, default: true},
    // CustomerSignerPanel 设置为 manual
    popoverTrigger: {type: String, default: 'click'},
    disabled: {type: Boolean, default: false},
    clearable: {type: Boolean, default: false},
    type: {type: String, default: 'customer'},
    width: {type: String, default: '280px'},
    panelWidth: {type: Number, default: 500},
    placeholder: {type: String, default: '+添加客户'},
    valueKey: {type: String, default: 'customerCode'},
    lableKey: {type: String, default: 'customerName'},
    params: Object
  },
  components: {
    CustomerPanel: () => import('./components/customer.vue'),
    CustomerSignerPanel: () => import('./components/customerSigner.vue'),
    SalesOrderPanel: () => import('./components/salesOrder.vue'),
    ContractPanel: () => import('./components/contract.vue'),
    PurchaseOrderPanel: () => import('./components/purchaseOrder.vue'),
    EmployeePanel: () => import('./components/employee.vue')
  },
  watch: {
    code: {
      handler (val) {
        if (val !== undefined) {
          if (!val || val === null) {
            this.dataObj = {}
          } else {
            const obj = {}
            obj[this.valueKey] = val
            obj[this.lableKey] = this.valueKey === this.lableKey ? val : this.name
            this.dataObj = this.dataObj && Object.keys(this.dataObj) > 0 ? this.dataObj : obj
            // console.log('code-data obj', this.dataObj)
          }
        }
      },
      immediate: true
    },
    dataObj: {
      handler (val) {
        const value = val && val[this.valueKey] ? val[this.valueKey] : null
        this.$emit('update:name', val && val[this.lableKey] ? val[this.lableKey] : null)
        this.$emit('st', value)
      },
      deep: true
      // immediate: true
    }
  },
  data () {
    return {
      dataObj: {},
      visiblePanel: false,
      canClear: false,
      isError: ''
    }
  },
  methods: {
    inputClear () {
      this.dataObj = {}
      this.handelSelect({})
    },
    onBlur (e) {
      // this.$emit('blur', e)
      // this.$parent.$emit('el.form.blur')
    },
    inputClick () {
      if (this.popoverTrigger === 'manual') {
        this.visiblePanel = !this.visiblePanel
      }
    },
    handleMouseover (e) {
      if (this.clearable && !this.disabled) {
        if (this.dataObj && Object.keys(this.dataObj).length > 0) {
          this.canClear = true
        } else {
          this.canClear = false
        }
      }
    },
    change (val) {
      // console.log('change', val)
      // this.dispatch('ElFormItem', 'el.form.change', [val]) // 值发生变化时, 向el-form-item分发事件 , 调用组件内部的校验流程
    },
    handelHide () {
      if (this.popoverTrigger !== 'manual') {
        this.$refs.panelRef.handelOk()
      }
      this.handelSelect()
    },
    handelSelect (data) {
      this.$emit('hide', data || this.dataObj)
    },
    handleMouseleave (e) {
      if (this.clearable) {
        this.canClear = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
>>>.el-input__inner:hover{
  cursor: pointer;

}
>>>.error >.el-input__inner{
    border-color:#F56C6C;
}

</style>
